<template>
	<view class="cu-modal bottom-modal" :class="modalName=='integralModal'?'show':''" @tap="hideModal" @touchmove.stop.prevent="()=>{return}">
		<view class="cu-dialog" @tap.stop>
			<view class="cu-bar ">
				<view class="text-lg margin-left title-height">
				{{$t('JLink.integral.deduct')}}
				<view v-if="message.integral" class='cu-tag round bg-orange sm text-sm'>{{$t('JLink.integral.remaining')}}：{{message.integral.integralNumber}}</view>
				</view>
			</view>
			<scroll-view v-if="message.integral" scroll-y :scroll-with-animation="true" :style="[{height:'calc('+scrollHeight+'upx)'}]">
				<view class="cu-list menu">
					<!-- 积分抵扣 -->
					<view class="cu-item text-left" @tap="selectIntegral(true)">
						<view class="content padding-sm">
							<view class="text-black">{{$t('JLink.integral.deduct')}}</view>
							<view class="text-gray text-sm">{{$t('JLink.integral.describe.one')}}<text class="text-red">{{message.currencyUnit}}{{message.integral.changeAmount}}</text>，{{$t('JLink.integral.describe.two')}}<text class="text-black">{{message.integral.changeNumber}}</text>{{$t('JLink.integral.describe.three')}}</view>
						</view>
						<view class="action">
							<text class="margin-lr-sm text-lg text-red">{{message.currencyUnit}}{{message.integral.changeAmount}}</text>
							<text :class="usingIntegral? 'cuIcon-roundcheckfill text-primary' : 'cuIcon-round text-grey'" class="lg " style="font-size:38upx"></text>
						</view>
					</view>
					<!-- 不使用 -->
					<view class="cu-item text-left" @tap="selectIntegral(false)">
						<view class="content padding-sm">
							{{$t('JLink.coupon.NotUse')}}
						</view>
						<view class="action">
							<text :class="!usingIntegral? 'cuIcon-roundcheckfill text-primary' : 'cuIcon-round text-grey'" class="lg " style="font-size:38upx"></text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view>
				<button class="KCARD cu-btn block bg-white text-primary margin-sm lg radius" style="border: 2upx solid #efeded" @tap="submit">{{$t('JLink.publicText.define')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
import {getGlobalProperties} from '@/utils/globalProperties.js'
const {screenHeightModal}=getGlobalProperties()
export default {
	props: {
		modalName:{
			type:String,
			default:''
		},
		message:{
			type:Object,
			default:()=>{
				return {}
			}
		}
	},
	data() {
	  return {
		  scrollHeight: screenHeightModal - 220,
		  usingIntegral:true
	  }
	},
	watch:{
		message:{
			handler(newVal){
				this.usingIntegral = newVal.usingIntegral
			},
			immediate: true
		}
	},
	methods: {
	// 优惠抵扣券
	 selectIntegral  (val){
	 	this.usingIntegral = val;
	 },
	 // 提交事件
	submit (){
	 	this.$emit('submit',this.usingIntegral)
	},
	hideModal () {
		this.$emit('hideModal',)
	  }
	},
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
